<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org">
<head>
	<title>community_building</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!--<meta name=viewportcontent="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">-->
	<link rel="stylesheet"  th:href="@{plug-in/element-ui/index.css}"/>
	<link rel="stylesheet" th:href="@{plug-in/my/myStyle.css}"/>
	<script th:src="@{plug-in/vue/vue.js}"></script>
	<script th:src="@{plug-in/vue-resource/vue-resource.js}"></script>
	<script th:src="@{plug-in/element-ui/index.js}"></script>
	<script th:src="@{plug-in/hplus/js/jquery.min.js?v=2.1.4}"></script>
	<script th:src="@{plug-in/my/myutil.js}"></script>
	<script type="text/javascript" th:src="@{plug-in/lhgDialog/lhgdialog.min.js?skin=metrole}"></script>
	<script th:src="@{plug-in/tools/curdtools_zh-cn.js}"></script>
	<script th:src="@{plug-in/jquery/jquery.cookie.js}"></script>
<style>

</style>
</head>
<body style="background-color: #FFFFFF;margin: 0!important;">

	<div id="communityBuildingList" v-cloak>

        <!--工具条-->
        <div name="searchColums" id="searchColums">
            <el-form :inline="true" :model="filters" size="small" ref="filters" class="searchForm">
                <el-form-item class="el-form-item" label="小区名称">
                    <el-input v-model="filters.name" name="name" auto-complete="off" placeholder="请输入"></el-input>
                </el-form-item>

                <span class="bth_search">
					<el-form-item>
			    		<el-button type="success" icon="el-icon-search" v-on:click="getCommunitys">查询</el-button>
			    	</el-form-item>
			    	<el-form-item>
			    		<el-button icon="el-icon-refresh" @click="resetForm('filters')">重置</el-button>
			    	</el-form-item>
				</span>
            </el-form>
        </div>
        <!--toolbar-->
        <el-row id="toolbar">
            <el-col :span="24">
                <div class="grid-content bg-purple-light">
                    <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleAdd">新增</el-button>
                    <el-button type="primary" size="mini" @click="batchRemove" :disabled="this.sels.length===0" icon="el-icon-delete">批量删除</el-button>
                    <!--<el-button type="primary" size="mini" @click="templeteDown"  icon="el-icon-download">模板下载</el-button>-->
                    <!--<el-button type="primary" size="mini" @click="templeteUp"  icon="el-icon-upload">导入</el-button>-->
                </div>
            </el-col>
        </el-row>

        <!--列表-->
        <el-table :data="communitys" id="datagrid" empty-text=" " height="250" border stripe size="mini" :header-row-class-name="headStyle" highlight-current-row v-loading="listLoading" :row-class-name="tableRowClassName" @sort-change="handleSortChange"  @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="45"></el-table-column>
            <el-table-column prop="index" :formatter="index_formatter" label="序号" width="60"></el-table-column>
            <el-table-column prop="name" label="小区名称" width="120"  show-overflow-tooltip></el-table-column>
            <el-table-column prop="area" label="小区面积" width="120"  show-overflow-tooltip></el-table-column>
            <el-table-column prop="managerFee" label="物业费(每平米)" width="120"  show-overflow-tooltip></el-table-column>
            <el-table-column prop="overgroundPark" label="地上车位数" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column prop="undergroundPark" label="地下车位数" width="120"  show-overflow-tooltip></el-table-column>
            <el-table-column prop="overgroundPrice" label="地上车位价格" width="120"  show-overflow-tooltip></el-table-column>
            <el-table-column prop="undergroundPrice" label="地下车位价格" width="120"  show-overflow-tooltip ></el-table-column>
            <el-table-column prop="overgroundLeaseFee" label="地上车位租赁费" width="120"  show-overflow-tooltip></el-table-column>
            <el-table-column prop="undergroundLeaseFee" label="地下车位租赁费" width="120"  show-overflow-tooltip></el-table-column>
            <el-table-column prop="position" label="小区位置" width="150"  show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="160" fixed="right">
                <template scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar" id="pageDiv">
            <el-pagination small background @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 50, 100]"
                           :page-size="pageSize" :total="total" layout="total,sizes, prev, pager, next"  style="float:right;"></el-pagination>
        </el-col>

        <!--编辑界面-->
        <el-dialog title="编辑"  :visible.sync="editFormVisible" :close-on-click-modal="false">
            <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm" size="mini">
                <el-input v-model="editForm.deptId" type="hidden" style="display: none!important;"></el-input>
                <el-col :span="12">

                    <el-form-item label="小区名称" prop="buildingName">
                        <el-input v-model="editForm.name" auto-complete="off" placeholder="请输入小区名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="小区面积" prop="area">
                        <el-input v-model="editForm.area" auto-complete="off" placeholder="请输入小区面积"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="物业费" prop="managerFee">
                        <el-input v-model="editForm.managerFee" auto-complete="off" placeholder="请输入物业费"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地上车位数" prop="overgroundPark">
                        <el-input v-model="editForm.overgroundPark" auto-complete="off" placeholder="请输入地上车位数"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地下车位数" prop="undergroundPark">
                        <el-input v-model="editForm.undergroundPark" auto-complete="off" placeholder="请输入地下车位数"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地上车位价格" prop="overgroundPrice">
                        <el-input v-model="editForm.overgroundPrice" auto-complete="off" placeholder="请输入价格"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地下车位价格" prop="undergroundPrice">
                        <el-input  placeholder="请输入价格" v-model="editForm.undergroundPrice"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地上车位租赁费" prop="overgroundLeaseFee">
                        <el-input v-model="editForm.overgroundLeaseFee" auto-complete="off" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地下车位租赁费" prop="undergroundLeaseFee">
                        <el-input v-model="editForm.undergroundLeaseFee" auto-complete="off" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属部门" prop="deptId" >
                        <el-autocomplete
                                popper-class="my-autocomplete"
                                v-model="editForm.deptName"
                                :fetch-suggestions="querySearch"
                                placeholder="请输入内容"
                                size="mini"
                                style="width: 100%"
                                @select="handleSelect">
                            <i class="el-icon-edit el-input__icon"
                               slot="suffix"
                               @click="handleIconClick">
                            </i>
                            <template slot-scope="{ item }">
                                <div class="name" style="display: none;">{{ item.deptId }}</div>
                                <span class="addr">{{ item.name }}</span>
                            </template>
                        </el-autocomplete>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="小区位置" prop="position">
                        <el-input v-model="editForm.position" auto-complete="off" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>

        <!--新增界面-->
        <el-dialog title="新增"  :visible.sync="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm" size="mini">
                <el-input v-model="addForm.deptId" type="hidden" style="display: none!important;"></el-input>
                <el-col :span="12">

                    <el-form-item label="小区名称" prop="buildingName" >
                        <el-input v-model="addForm.name" auto-complete="off" placeholder="请输入小区名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="小区面积" prop="area" >
                        <el-input v-model="addForm.area" auto-complete="off" placeholder="请输入小区面积">
                            <template slot="append">平方米</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="物业费" prop="managerFee" >
                        <el-input v-model="addForm.managerFee" auto-complete="off" placeholder="请输入物业费">
                            <template slot="append">每平米</template>
                        </el-input>

                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地上车位数" prop="overgroundPark" >
                        <el-input v-model="addForm.overgroundPark" auto-complete="off" placeholder="请输入地上车位数">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地下车位数" prop="undergroundPark" >
                        <el-input v-model="addForm.undergroundPark" auto-complete="off" placeholder="请输入地下车位数"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地上车位价格" prop="overgroundPrice" >
                        <el-input v-model="addForm.overgroundPrice" auto-complete="off" placeholder="请输入价格">
                            <template slot="append">万元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地下车位价格" prop="undergroundPrice" >
                        <el-input  placeholder="请输入价格" v-model="addForm.undergroundPrice">
                            <template slot="append">万元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地上车位租赁费" prop="overgroundLeaseFee" >
                        <el-input v-model="addForm.overgroundLeaseFee" auto-complete="off" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地下车位租赁费" prop="undergroundLeaseFee" >
                        <el-input v-model="addForm.undergroundLeaseFee" auto-complete="off" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属部门" prop="deptId" >
                        <el-autocomplete
                                popper-class="my-autocomplete"
                                v-model="addForm.deptName"
                                :fetch-suggestions="querySearch"
                                placeholder="请输入内容"
                                size="mini"
                                style="width: 100%"
                                @select="handleSelect">
                            <i class="el-icon-edit el-input__icon"
                                    slot="suffix"
                                    @click="handleIconClick">
                            </i>
                            <template slot-scope="{ item }">
                                <div class="name" style="display: none;">{{ item.deptId }}</div>
                                <span class="addr">{{ item.name }}</span>
                            </template>
                        </el-autocomplete>
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="小区位置" prop="position" >
                        <el-input type="textarea" :rows="4" v-model="addForm.position" auto-complete="off" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>
        <!--导入界面-->
        <el-dialog title="导入"  :visible.sync="importFormVisible" :close-on-click-modal="false">
            <el-upload
                    class="upload-demo"
                    ref="upload"
                    accept="xls,xlsx"
                    action="communityBuilding?upload"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="handleSuccess"
                    :before-upload="beforeAvatarUpload"
                    :file-list="fileList"
                    :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
            </el-upload>
        </el-dialog>
	</div>
</body>
<script>

    var vue = new Vue({
        el:"#communityBuildingList",
        data() {
            return {
                filters: {
                    name:''
                },
                url:{
                    list:'community/page',
                    del:'community?doDel',
                    batchDel:'community?doBatchDel',
                    queryDict:'systemController.do?typeListJson',
                    save:'community?doAdd',
                    edit:'community?doUpdate'
                },
                communitys: [],
                fileList:[],
                total: 0,
                page: 1,
                pageSize:10,
                sort:{
                    sort:'id',
                    order:'desc'
                },
                listLoading: false,
                sels: [],//列表选中列

                editFormVisible: false,//编辑界面是否显示
				importFormVisible:false,
                editLoading: false,
                editForm: {},
                editFormRules: {
                },

                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {
                },
                //新增界面数据
                addForm: {},

                formFile: {
                },
                buildingTreeData:[],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                //数据字典
                propertyRightOptions:[],
                restaurantsDept: []
            }
        },
        http: {
            headers: {
                'Authorization' : "Bearer "+$.cookie(getToken())
            }
        },
        methods: {
            handleSortChange(sort){
                this.sort={
                    sort:sort.prop,
                    order:sort.order=='ascending'?'asc':'desc'
                };
                this.getCommunitys();
            },
            handleDownFile(type,filePath){
                var downUrl=this.url.downFile+"?down="+type+"&dbPath="+filePath;
                window.open(downUrl);
            },
            tableRowClassName(row, index) {
                //把每一行的索引放进row
                row.index = row.rowIndex
            },
            headStyle({ row, rowIndex }){
                return "table_head_style";
            },
            index_formatter:function(row, column ,cellValue,index) {
                //放回索引值
                return (this.pageSize * (this.page - 1)  + 1+ index);
            },
            formatDate: function(row,column,cellValue, index){
                return !!cellValue?utilFormatDate(new Date(cellValue), 'yyyy-MM-dd'):'';
            },
            formatDateTime: function(row,column,cellValue, index){
                return !!cellValue?utilFormatDate(new Date(cellValue), 'yyyy-MM-dd hh:mm:ss'):'';
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getCommunitys();
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.page = 1;
                this.getCommunitys();
            },
            resetForm(formName) {
                this.filters= {
                    buildingName:'',
                    buildingType:'',
                }
            },
			//获取用户列表
            getCommunitys() {
                let para = {
                    params: {
                        page: this.page,
                        limit: this.pageSize,
                        //排序
                        orderByField:this.sort.sort,
                        isAsc:this.sort.order,
                        name:this.filters.name
                    }
                };
                this.listLoading = true;
                this.$http.get(this.url.list,para).then((res) => {
                    this.total = res.data.total;
                var datas=res.data.records;
                this.communitys = datas;
                this.listLoading = false;
            });
            },
			//删除
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                let para = { id: row.id };
                this.$http.post(this.url.del,para,{emulateJSON: true}).then((res) => {
                    this.listLoading = false;
                this.$message({
                    message: '删除成功',
                    type: 'success',
                    duration:1500
                });
                this.getCommunitys();
            });
            }).catch(() => {

                });
            },
			//显示编辑界面
            handleEdit: function (index, row) {
                this.editFormVisible = true;
                var item = {};
                this.editForm = Object.assign({}, row);
                for(i=0;i<this.restaurantsDept.length;i++){
                    if(this.restaurantsDept[i].deptId==row.deptId){
                        item.name = this.restaurantsDept[i].name;
                        item.deptId = this.restaurantsDept[i].deptId;
                        break;
                    }
                }

                this.formFile={
                };
                this.handleSelect(item)
            },
			//显示新增界面
            handleAdd: function () {
                this.addFormVisible = true;
                this.addForm = {
                };
                this.formFile={
                };
            },
			//编辑
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                        let para = Object.assign({}, this.editForm);
                        this.$http.post(this.url.edit,para).then((res) => {
                            this.editLoading = false;
                        this.$message({
                            message: '提交成功',
                            type: 'success',
                            duration:1500
                        });
                        this.$refs['editForm'].resetFields();
                        this.editFormVisible = false;
                        this.getCommunitys();
                    });
                    });
                    }
                });
            },
			//新增
            addSubmit: function () {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                        let communityBuilding = Object.assign({}, this.addForm);

                            communityBuilding.createDate = !communityBuilding.createDate ? '' : utilFormatDate(new Date(communityBuilding.createDate), 'yyyy-MM-dd');

                        this.$http.post(this.url.save,communityBuilding).then((res) => {
                            this.addLoading = false;
                        this.$message({
                            message: '提交成功',
                            type: 'success',
                            duration:1500
                        });
                        this.$refs['addForm'].resetFields();
                        this.addFormVisible = false;
                        this.getCommunitys();
                    });
                    });
                    }
                });
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
			//模板下载
            templeteDown:function(){
                location.href = "templates/building.xls";
			},
            //模板上传
            templeteUp:function(){
                this.fileList=[];
                this.importFormVisible = true;
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
			handleSuccess(response, file, fileList){
                if(!response.success){
                    this.$message.error(response.msg);
				}else{
                    this.$message({
                        message: response.msg,
                        type: 'success',
                        duration:1500
                    });
				}
                this.fileList=[];
                this.importFormVisible = false;
                //刷新列表
                this.getCommunitys();
			},
            beforeAvatarUpload(file) {
                const isXls = file.type === 'application/vnd.ms-excel';
                const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                if (!isXls&&!isXlsx) {
                    this.$message.error('格式不正确!');
                }

                return isXls||isXlsx;
            },
			//批量删除
            batchRemove: function () {
                var ids = this.sels.map(item => item.id).toString();
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                let para = { ids: ids };
                this.$http.post(this.url.batchDel,para,{emulateJSON: true}).then((res) => {
                    this.listLoading = false;
                this.$message({
                    message: '删除成功',
                    type: 'success',
                    duration:1500
                });
                this.getCommunitys();
            });
            }).catch(() => {
                });
            },
			//初始化数据字典
            initDictsData:function(){
                this.$http.get("dict/type/log_type").then((res) => {
                    if(res.ok){
                        this.propertyRightOptions = res.body;
					}
                });
                //初始化部门列表
                this.$http.get("community/deptList").then((res) => {
                    if(res.ok){
                        this.restaurantsDept = res.body;
                    }
                });
            },
			//初始化树
            loadBuildingTreeData:function(){
                this.$http.get("communityBuilding?loadBuildingTreeData").then((res) => {
                    if(res.ok){
                        this.buildingTreeData = res.body;
                    }
                });
			},
            querySearch(queryString, cb) {
                var restaurants = this.restaurantsDept;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurantsDept) => {
                    return (restaurantsDept.name.toString().indexOf(queryString) === 0);
                };
            },

            handleSelect(item) {
                if(this.addFormVisible){
                    this.addForm.deptId = item.deptId;
                    this.addForm.deptName = item.name;
                }else{
                    this.editForm.deptId = item.deptId;
                    this.editForm.deptName = item.name;
                }

            },
            handleIconClick(ev) {
                console.log(ev);
            } ,
            initDictByCode:function(code,_this,dictOptionsName){
                if(!code || !_this[dictOptionsName] || _this[dictOptionsName].length>0)
                    return;
                this.$http.get(this.url.queryDict,{params: {typeGroupName:code}}).then((res) => {
                    var data=res.data;
                if(data.success){
                    _this[dictOptionsName] = data.obj;
                    _this[dictOptionsName].splice(0, 1);//去掉请选择
                }
            });
            }
        },
        mounted() {
            //加载楼房树
			this.loadBuildingTreeData();
            this.initDictsData();
            this.getCommunitys();
        }
    });

    function utilFormatDate(date, pattern) {
        pattern = pattern || "yyyy-MM-dd";
        return pattern.replace(/([yMdhsm])(\1*)/g, function ($0) {
            switch ($0.charAt(0)) {
                case 'y': return padding(date.getFullYear(), $0.length);
                case 'M': return padding(date.getMonth() + 1, $0.length);
                case 'd': return padding(date.getDate(), $0.length);
                case 'w': return date.getDay() + 1;
                case 'h': return padding(date.getHours(), $0.length);
                case 'm': return padding(date.getMinutes(), $0.length);
                case 's': return padding(date.getSeconds(), $0.length);
            }
        });
    };
    function padding(s, len) {
        var len = len - (s + '').length;
        for (var i = 0; i < len; i++) { s = '0' + s; }
        return s;
    };
    $(function () {
        autodivheight();
    });

    window.onresize=autodivheight; //浏览器窗口发生变化时同时变化表格高度

</script>
</html>